<template>
	<base-page>
		<view slot="header" class="content-wrapper">
			<cu-custom :isBack="true" bgColor="bg-white"><block slot="content">花市地区详情</block></cu-custom>
			<view class="tab">
				<view class="tab-ul" v-for="(item, index) in channlList" :key="index" @click="tabSelect(item, index)">
					<view class="tab-li" :class="item.category_id === goodsTypeId ? 'slightly-red' : ''">{{ item.category_name }}</view>
				</view>
			</view>
		</view>
		<view slot="center" class=" section bg-gray" style="height:100%">
			<view class="content-wrapper" style="padding: 0 30rpx;height:100%">
				<block v-if="channlList.length > 0">
					<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
						<view class="areaGoodsList">
							<view v-for="(item, index) in goodsList" :key="index" @click="goDetail(item.sku_id)">
								<view class="goods-pic" :style="{ backgroundImage: 'url(' + $Utils.img(item.goods_image) + ')' }"></view>
								<text>{{ item.goods_name }}</text>
								<text class="introduce">{{ item.introduction }}</text>
								<text class="price">￥{{ item.price }}</text>
							</view>
						</view>
					</mescroll-uni>
				</block>
			</view>
		</view>
	</base-page>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';

export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)

	data() {
		return {
			mescroll: null,
			channlList: [],
			id: 34,
			goodsTypeId: 0,
			goodsList: [],
			page: 1,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			pageObj: {
				page: 1,
				page_size: 10
			}
		};
	},
	onLoad(e) {
		this.id = this.$Router.queryObj().id
	},
	onShow(e) {},
	methods: {
		tabSelect(val, inx) {
			// this.seckillObj = {
			//     seckill_id: val.seckill_id,
			//     site_id: 0,
			//     page: 1,
			//     page_size: 10
			// };
			this.goodsTypeId = val.category_id;
			// this.mescroll.setPageNum(1);
			this.mescroll.resetUpScroll();
			this.mescroll.scrollTo(0);
		},
		goDetail(id) {
			this.$Router.push({
				path: '/shopPages/goods/detail',
				query: {
					goods_id: id,
					is_id: id,
					type: 1
				}
			});
		},
		getAreaTabInfo(first) {
			let config = {
				pid: this.id,
				level: 3
			};
			this.$Apis.getAreaTab(config).then(res => {
				console.log(res, 'tabtabtab');
				// this.channlList = JSON.parse(res).data
				this.channlList = res;
				// if (!first) {
				this.goodsTypeId = this.channlList[0].category_id;
				// }
			});
		},
		// 初始化
		mescrollInit(e) {
			this.mescroll = e;
		},
		/*下拉刷新的回调 */
		downCallback(e) {
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.mescroll.resetUpScroll();
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			// console.log('log', page);
			let config = {
				category_id: this.goodsTypeId,
				category_level: 3,
				page: page.num,
				page_size: 10
			};
			this.$Apis.getHuaShiGoods(config).then(res => {
				console.log(res, '商品商品商品商品商品');
				this.mescroll.endSuccess(res.list.length);
				const list = res.list.map(v => {
					if (v.goods_image.includes(',')) {
						v.goods_image = v.goods_image.split(',')[0];
					}
					return v;
				});
				if (page.num === 1) {
					this.goodsList = [];
				}
				this.goodsList = this.goodsList.concat(list);
			});
		}
	},
	mounted() {
		this.getAreaTabInfo();
	}
};
</script>

<style lang="scss">
/deep/.mescroll-uni {
	height: 100% !important;
}
.content-wrapper {
	.tab {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 30px;
		margin: 10px 0;
		// background-color: #f4f4f4;
		.tab-ul {
			width: 100%;
			// background: #f4f4f4;
			text-align: center;
			.tab-li {
			}
		}
	}
	.areaGoodsList {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		> view {
			border-radius: 6px;
			width: 48%;
			background-color: #fff;
			margin-bottom: 10px;
			padding: 10px;
			.goods-pic {
				width: 100%;
				height: 155px;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: 50%;
				margin-bottom: 10px;
				transform: scale(0.8);
			}
			text {
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
				margin-bottom: 5px;
			}
			.introduce {
				color: #999999;
			}
			.price {
				color: #eb4a54;
				font-size: 14px;
			}
		}
	}
}
</style>
